<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { reactive, watch, ref } from 'vue'
import {
  transportSelectpage,
  deliverGetSelectList,
  goodsSel,
  clientSelect,
  placeendSelect,
  submarketSelect,
  // packSelect,
  placestartSelect,
  repertoryIndex,
  storeSelect
} from '@/api/common'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElSelect,
  ElOption,
  ElDivider,
  ElInputNumber,
  TabsPaneContext,
  ElTabs,
  ElButton,
  ElTable,
  ElTableColumn,
  ElTabPane,
  ElTransfer
} from 'element-plus'

const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    console.log('----行数据---', currentRow)
    form.modeOfTransport = currentRow.transport_text //运输方式
    form.modeOfTransportText = currentRow.transport_text // 运输方式中文,
    form.customerManagement = currentRow.client_code // 客户号
    form.typeOfGoods[0] = currentRow.goods_id //货物种类
    form.typeOfGoodsText = currentRow.goods_text // 获取种类中文
    form.shipper = currentRow.fahuo //出库人
    form.consignee = currentRow.shouhuo //收货人
    form.totalWeight = currentRow.weight //重量合计
    form.number = currentRow.quantity //数量
    form.totalVolume = currentRow.volume //体积合计
    form.density = currentRow.density //密度
    form.consigneePhone = currentRow.shouhuo_mobile //收货人电话
    form.totalNumberOfpices = currentRow.units //件数合计
    form.origin = currentRow.placestart_id //始发地
    form.originText = currentRow.placestart_text //始发地的中文
    form.address = currentRow.placeend_id //目的地
    form.addressText = currentRow.placeend_text //目的地中文
    form.packagingType[0] = currentRow.pack_id //包装方式
    form.packagingTypeText = currentRow.pack_text //包装方式zw
    form.distributionMarket = currentRow.submarket_id //分货市场
    form.distributionMarketText = currentRow.submarket_text //分货市场zw
    form.salespersonName = currentRow.salesman //业务员姓名
    form.businessFloorPrice = currentRow.base_price //业务底价
    form.businessFloorreight = currentRow.base_freight //业务底价运费
    form.RMBPrice = currentRow.cny_value //人民币货值
    form.dollarPrice = currentRow.usd_value //美元货值
    form.exchangeRate = currentRow.usd_cny //汇率:美元-人民币
    form.bvjs = currentRow.insurance //保率方式:1=百货,2=服装,99=手动
    form.guaranteeRate = currentRow.insurance_rate //保率
    form.valuePreservationPerKilogram = currentRow.kilo_value //每公斤货值
    form.businessFloorPrice = currentRow.insurance_fee //应收保险费
    form.packagingCalculation = currentRow.pack_type //包装计算方式:1=按件,2=按重
    form.totalNumberOfpices = currentRow.pack_fee //包装费用
    form.packingCharge = currentRow.package //打包费用
    form.freightCalculationMethod = currentRow.transport_type //运费计算方式:1=按件,2=按重量,99=手动
    form.fieghtPrice = currentRow.transport_price //运费价格
    form.freight = currentRow.transport_fee //运费
    form.shortdistancefee = currentRow.short_fee_cny //短途费
    form.shortdistancefeeUSD = currentRow.short_fee_usd //短途费美金
    form.invoicing = currentRow.agency_fund //代收款
    form.otherReceivables = currentRow.other_fund //其他应收款
    form.surcharge = currentRow.append_fund //附加费
    form.otherReceivables = currentRow.goods_fee //应收货款
    form.paymentMethod = currentRow.paytype //付款类型未看到具体的暂定，1=，2=3=，4=
    form.totalReceivableExpenses = currentRow.total_fee //应收总费用
    form.illustrate = currentRow.explain //说明
    form.notes = currentRow.remark //备注
    form.whetherToImitateTheBrand = currentRow.imitate //是否仿牌
    form.state = currentRow.state //单据状态
    form.audit = currentRow.audit //审核人
    form.enact = currentRow.enact //制单人
    form.enacttime = currentRow.enacttime //制单时间
    form.brokerage_name = currentRow.brokerage_name //返佣姓名
    form.brokerage_rate = currentRow.brokerage_rate //返佣比例
    form.brokerage_money = currentRow.brokerage_money //返佣金额
    form.brokerage_status = currentRow.brokerage_status //返佣状态
    form.brokerage_remark = currentRow.brokerage_remark //返佣备注
    form.foreignExpenses = currentRow.foreign_charge //国外费用
    form.productNameRemarks = currentRow.remark2 //品名备注
    form.mustPrice = currentRow.goods_fee //应收货款
    form.transport_expires = currentRow.transport_expires //应收货款
    form.store_id = currentRow.store_id //仓库
  }
)

const form: any = reactive({
  typeOfGoods: '',
  typeOfGoodsText: '',
  locationOfGoods: '',
  transport: '',
  origin: '',
  originText: '',
  address: '',
  addressText: '',
  shortdistancefee: '',
  shortdistancefeeUSD: '',
  surcharge: '',
  freightCalculationMethod: '',
  packingCharge: '',
  valuePreservationPerKilogram: '',
  freight: '',
  packagingCalculation: '',
  Compensation: '',
  rmbValue: '',
  packagingType: '',
  packagingTypeText: '',
  relatedCustomers: '',
  warehousingTime: '',
  productNameRemarks: '',
  waybillNumber: '',
  numberOfInboundPieces: '',
  documentStatus: '',
  customerNo: '',
  shipper: '',
  consignee: '',
  consigneePhone: '',
  destination: '',
  modeOfTransport: '',
  modeOfTransportText: '',
  distributionMarket: '',
  distributionMarketText: '',
  receivingDate: '',
  dateOfIssuance: '',
  totalWeight: '',
  totalVolume: '',
  packingQuantity: '',
  usDollarCreditValue: '',
  guaranteeRate: '',
  insurancePercentage: '',
  packingCharges: '',
  businessFloorFreight: '',
  otherReceivables: '',
  invoicing: '',
  fieghtPrice: '',
  totalReceivableExpenses: '',
  salespersonName: '',
  number: '',
  businessFloorPrice: '',
  paymentMethod: '',
  illustrate: '',
  whetherToImitateTheBrand: '',
  insurancePremiumsReceivabl: '',
  RMBPrice: '',
  pieceArray: [],
  exchangeRate: 7.1285,
  bvjs: '',
  mustPrice: '',
  qg_number: '', //批次号
  qg_name: '', //清关公司名称
  qg_zl: '', //清关公司转出重量
  qg_tj: '', //转出体积
  qg_md: '', //转出密度
  qg_send_worth: '', //转出货值
  qg_bl: '', //转出保率
  qg_bx: '', //转出保险
  qg_qtf: '', //转出其它费
  qg_pirce: '', //清关价格
  qg_money: '', //清关金额
  qg_type: '', //转出运输方式
  qg_ml: '', //毛利润
  qg_gnfy: '', //国内费用
  qg_yj: '', //押金
  qg_sbbz: '', //商标备注
  qg_fhzt: '', //出库状态
  qg_gwfy: '', //国外费用
  qg_hc: '', //后程不可回收
  djstatus: '', //单据状态
  shr: '', //审核人
  zdr: '', //制单人
  zdsj: '', //制单时间
  fyname: '', //返佣姓名
  fybl: '', //返佣比例
  fymoiney: '', //返佣金额
  fystatus: '', //返佣状态（未结款,已结款）
  fyremark: '', //返佣备注,
  foreignExpenses: '', //国外费用
  state: '', //单据状态
  audit: '', //审核人
  enact: '', //制单人
  enacttime: '', //制单时间
  brokerage_name: '', //返佣姓名
  brokerage_rate: '', //返佣比例
  brokerage_money: '', //返佣金额
  brokerage_status: '', //返佣状态
  brokerage_remark: '', //返佣备注,
  transport_expires: '', // 运输期限
  store_id: '' //仓库
})
// 运输期限
// const transitPriodArr: any = reactive([])
// 运费计算方式
const freightCalculationMethodArr: any = reactive([])

// 分货市场
// const distributionMarketArr: any = reactive([])

// 单据状态
const danjuArr: any = reactive([
  {
    label: '未核销',
    value: 0
  },
  {
    label: '已核销',
    value: 1
  }
])

// 返佣状态
const fanyongArr: any = reactive([
  {
    label: '未返佣',
    value: 0
  },
  {
    label: '已返佣',
    value: 1
  }
])

// 包装计算
const packagingCalculationArr: any = reactive([])
// 包装类型
const packagingTypeArr: any = reactive([
  {
    key: 0,
    value: '套袋'
  },
  {
    key: 1,
    value: '防水袋'
  },
  {
    key: 2,
    value: '原缠'
  },
  {
    key: 3,
    value: '木架'
  },
  {
    key: 4,
    value: '木托'
  },
  {
    key: 5,
    value: '木箱'
  },
  {
    key: 6,
    value: '整柜'
  },
  {
    key: 7,
    value: '纸箱'
  },
  {
    key: 8,
    value: '加固'
  },
  {
    key: 9,
    value: '压缩套包'
  },
  {
    key: 10,
    value: '护角'
  }
])
// 货物种类
const typeOfGoodsArr: any = reactive([])
const getgoodsSelect = async () => {
  let res: any = await goodsSel()
  res.data.list.forEach((item) => {
    typeOfGoodsArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getgoodsSelect()
//始发地
const originArr: any = reactive([])
const getOriginArrList = async () => {
  let res = await placestartSelect()
  res.data.list.forEach((item) => {
    originArr.push({
      label: item.name,
      value: item.id
    })
  })
}
//分货市场
const distributionMarketArr: any = reactive([])
const getdistributionMarketList = async () => {
  let res = await submarketSelect()
  res.data.list.forEach((item) => {
    console.log('我是分货市场', item)
    distributionMarketArr.push({
      label: item.name,
      value: item.id
    })
  })
}
//目的地
const addressArr: any = reactive([])
const getadressArrList = async () => {
  let res = await placeendSelect()
  res.data.list.forEach((item) => {
    console.log('我是目的地', item)
    addressArr.push({
      label: item.name,
      value: item.id
    })
  })
}

// 货物位置
const storeArr: any = reactive([])
const getStoreSelect = async () => {
  let res: any = await storeSelect({})
  res.data.list.forEach((item) => {
    storeArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getgoodsSelect()

getOriginArrList()
getadressArrList(), getdistributionMarketList(), getStoreSelect()

//付款方式
const paymentMethodArr: any = reactive([])
//是否仿牌

//保率计算方式
const bfjs: any = reactive([])
//是否仿牌
const whetherToImitateTheBrandArr: any = reactive([])
const getOptions = async () => {
  let res: any = await deliverGetSelectList()
  //是否仿牌
  res.data.imitateList.forEach((item, index) => {
    whetherToImitateTheBrandArr.push({
      label: item,
      value: index
    })
  })
  //保率计算方式

  for (let a in res.data.insuranceList) {
    let b = res.data.insuranceList[a]
    bfjs.push({
      label: b,
      value: a
    })
  }
  //付款方式
  for (let a in res.data.paytypeList) {
    let b = res.data.paytypeList[a]
    paymentMethodArr.push({
      label: b,
      value: a
    })
  }
  //包装
  for (let a in res.data.packTypeList) {
    let b = res.data.packTypeList[a]
    packagingCalculationArr.push({
      label: b,
      value: a
    })
  }
  //运费计算
  for (let a in res.data.transportTypeList) {
    let b = res.data.transportTypeList[a]
    freightCalculationMethodArr.push({
      label: b,
      value: a
    })
  }
  console.log(res, bfjs, '下拉列表集合')
}
// 运输方式
const modeOfTransportArr: any = reactive([])
const getTransportSelect = async () => {
  let res: any = await transportSelectpage()
  res.data.list.forEach((item) => {
    modeOfTransportArr.push({
      label: item.name,
      value: item.id,
      density_arr: item.density_arr,
      transport_expires: item.predict
    })
  })
}
getOptions()
getTransportSelect()

//商品列表 穿
const shopList: any = reactive([])
const selShopList = ref([])

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}

const activeName = ref('1')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
//仓库已选择货物列表
const tableData: any = ref([])
//选择出库货物
const shopChange = (e) => {
  if (e.length > 0) {
    tableData.value = []
    let numTotal = 0
    let totalWeight = 0
    let worth = 0
    let volume = 0

    e.map((item) => {
      console.log('---map-item---', item)
      let shopItem = shopList[shopList.length - item]
      worth += Number(shopItem.worth) * Number(shopItem.quantity)
      totalWeight += Number(shopItem.weight)
      numTotal += Number(shopItem.quantity)
      if (Number(shopItem.length) && Number(shopItem.width) && Number(shopItem.high)) {
        volume += Number(shopItem.length) * Number(shopItem.width) * Number(shopItem.high)
      }
      tableData.value.push(shopItem)
    })
    form.number = numTotal //总数
    form.totalVolume = volume // 总体积
    form.totalWeight = totalWeight //总重量
    form.totalNumberOfpices = e.length //总数量
    form.RMBPrice = worth //人民币货值
    form.dollarPrice = Number(worth / form.exchangeRate).toFixed(0) //美金货值
    form.valuePreservationPerKilogram = Number(form.dollarPrice / totalWeight).toFixed(0) //每公斤货值
    form.guaranteeRate = blSum() //保率
    form.businessFloorPrice = Number(form.dollarPrice * form.guaranteeRate * 0.01).toFixed(0)
    midu()
  } else {
    tableData.value = []
  }
}
//保率计算
const blSum = () => {
  switch (form.bvjs) {
    case '百货':
      if (form.valuePreservationPerKilogram <= 30) {
        return 1
      } else if (
        30 < form.valuePreservationPerKilogram &&
        form.valuePreservationPerKilogram <= 50
      ) {
        return 2
      } else if (form.valuePreservationPerKilogram > 50) {
        return 3
      }
      break
    case '服装':
      if (form.valuePreservationPerKilogram <= 20) {
        return 1
      } else if (
        20 < form.valuePreservationPerKilogram &&
        form.valuePreservationPerKilogram <= 30
      ) {
        return 2
      } else if (form.valuePreservationPerKilogram > 30) {
        return 3
      }
      break
    default:
      return ''
  }
}
//密度计算
const midu = () => {
  if (form.totalWeight && form.totalVolume) {
    form.density = (Number(form.totalWeight) / Number(form.totalVolume)).toFixed(2)
  } else {
    form.density = ''
  }
}
//获取客户号
const loading = ref(false)
interface ListItem {
  code: string
  id: string
  fahuo: string
}
const customerList = ref<ListItem[]>([])
const customerManagementOptions = ref<ListItem[]>([])
const remoteMethod = async (query: string) => {
  if (query) {
    loading.value = true
    let data: any = await clientSelect()
    let list = data.data.list
    customerList.value = list
    // setTimeout(() => {
    loading.value = false
    customerManagementOptions.value = list.filter((item) => {
      return item.code.includes(query)
    })
    console.log(customerManagementOptions, 'customerManagementOptions')
    // }, 200)
  } else {
    customerManagementOptions.value = []
  }
}
const selectCustomer = (val) => {
  console.log(val, 'val')
  let data = customerList.value.find((item) => {
    console.log(item, 'item')
    return item.id == val
  })
  console.log(data, 'data')
  // console.log(form)
  form.shipper = data?.fahuo
}

let miduArr: any = reactive([])

watch(form, (newVal, oldVal) => {
  if (form.modeOfTransport) {
    modeOfTransportArr.forEach((item) => {
      console.log('---modeOfTransportArr-item---', item)
      if (item.value == form.modeOfTransport) {
        form.modeOfTransportText = item.label
        form.transport_expires = item.transport_expires
        miduArr = item.density_arr ? item.density_arr : []
      }
    })
  }

  if (form.typeOfGoods) {
    typeOfGoodsArr.forEach((item) => {
      if (item.value == form.typeOfGoods) {
        form.typeOfGoodsText = item.label
      }
    })
  }

  if (form.origin) {
    originArr.forEach((item) => {
      if (item.value == form.origin) {
        form.originText = item.label
      }
    })
  }

  if (form.address) {
    addressArr.forEach((item) => {
      if (item.value == form.address) {
        form.addressText = item.label
      }
    })
  }

  if (form.packagingType) {
    packagingTypeArr.forEach((item) => {
      if (item.key == form.packagingType) {
        form.packagingTypeText = item.value
      }
    })
  }

  if (form.distributionMarket) {
    distributionMarketArr.forEach((item) => {
      if (item.value == form.distributionMarket) {
        form.distributionMarketText = item.label
      }
    })
  }

  // 计算总费用
  if (
    form.freight &&
    form.businessFloorPrice &&
    form.invoicing &&
    form.packingCharge &&
    form.surcharge &&
    form.shortdistancefeeUSD &&
    form.otherReceivables &&
    form.foreignExpenses
  ) {
    form.totalReceivableExpenses =
      Number(form.freight) +
      Number(form.businessFloorPrice) +
      Number(form.invoicing) +
      Number(form.packingCharge) +
      Number(form.surcharge) +
      Number(form.shortdistancefeeUSD) +
      Number(form.otherReceivables) +
      Number(form.foreignExpenses)
  }
})

const getRepertorIndex = async () => {
  if (form.customerManagement && form.typeOfGoods && form.origin) {
    console.log('---需要查询仓库货物数据---', form.typeOfGoods)
    shopList.splice(0, shopList.length)
    let res = await repertoryIndex({
      client_code: form.customerManagement,
      goods_ids: form.typeOfGoods.join(','),
      store_id: form.store_id,
      pageSize: 10000,
      page: 1
    })

    res.data.data.forEach((item) => {
      shopList.push(item)
    })
    console.log('---shopList---', shopList)
  }
}

// 运费计算方式更改
const yunfeiChange = (ev) => {
  console.log('---运费计算变更---', ev)
  if (ev == 1) {
    miduArr.length > 0 &&
      miduArr.forEach((item) => {
        if (Number(form.density) >= Number(item.min) && Number(form.density) <= Number(item.max)) {
          form.fieghtPrice = item.price
        } else {
          form.fieghtPrice = 0
        }
      })

    form.fieght = form.fieghtPrice * form.totalWeight
  }
  if (ev == 2 && form.fieghtPrice >= 0) {
    form.freight = form.fieghtPrice * form.totalVolume
  }
  if (ev == 3 && form.fieghtPrice >= 0) {
    form.freight = form.fieghtPrice * form.number
  }
}

// 输入运费价格
const fieghtPriceChange = () => {
  if (form.freightCalculationMethod == 1) {
  }
  if (form.freightCalculationMethod == 2 && form.fieghtPrice) {
    form.freight = form.fieghtPrice * form.totalVolume
  }
  if (form.freightCalculationMethod == 3 && form.fieghtPrice) {
    form.freight = form.fieghtPrice * form.number
  }
}

// 定义组件的方法
defineExpose({
  // 获取填写的表单数据
  getFormData: () => {
    return form
  },
  // 获取出库的货品
  getTabelData: () => {
    return tableData.value
  }
})
</script>

<template>
  <ElForm :model="form" label-width="auto">
    <ElTabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
      <ElTabPane label="基本设置" name="1">
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.modeOfTransport')">
              <ElSelect
                v-model="form.modeOfTransport"
                :placeholder="t('alertEn.PleaseSelectThemodeOfTransport')"
                filterable
              >
                <ElOption
                  v-for="item in modeOfTransportArr"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('customerManagement.customerNo')">
              <!-- <ElInput v-model="form.customerManagement" /> -->
              <ElSelect
                v-model="form.customerManagement"
                :remote-method="remoteMethod"
                :loading="loading"
                filterable
                remote
                @change="selectCustomer($event)"
              >
                <el-option
                  v-for="item in customerManagementOptions"
                  :key="item.id"
                  :label="item.code"
                  :value="item.code"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('warehousingEntry.typeOfGoods')">
              <ElSelect
                :style="{ width: '100%' }"
                multiple
                filterable
                v-model="form.typeOfGoods"
                :placeholder="t('alertEn.PleaseSelectThetypeOfGoods')"
              >
                <ElOption
                  v-for="item in typeOfGoodsArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem
              label-width="100px"
              :label="t('warehousingEntryAddWrite.productNameRemarks')"
            >
              <ElInput v-model="form.productNameRemarks" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('customerManagement.shipper')">
              <ElInput v-model="form.shipper" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.totalWeight')">
              <ElInput v-model="form.totalWeight" @blur="midu"
                ><template #append>KG</template></ElInput
              >
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.number')">
              <ElInput v-model="form.number" disabled />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('customerManagement.consignee')">
              <ElInput v-model="form.consignee" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.totalVolume')">
              <ElInput v-model="form.totalVolume" @blur="midu">
                <template #append>m³</template>
              </ElInput>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrder.density')">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('customerManagement.consigneePhone')">
              <ElInput v-model="form.consigneePhone" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.totalNumberOfpices')">
              <ElInput v-model="form.totalNumberOfpices" disabled>
                <template #append>包</template>
              </ElInput>
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="货物仓库">
              <ElSelect v-model="form.store_id" filterable :placeholder="t('common.selectText')">
                <ElOption
                  v-for="item in storeArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('router.origin')">
              <ElSelect
                v-model="form.origin"
                filterable
                :placeholder="t('alertEn.PleaseSelectTheorigin')"
              >
                <ElOption
                  v-for="item in originArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.packagingType')">
              <ElSelect
                v-model="form.packagingType"
                multiple
                filterable
                :placeholder="t('alertEn.PleaseSelectThepackagingType')"
              >
                <ElOption
                  v-for="item in packagingTypeArr"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('warehousingEntry.destination')">
              <ElSelect v-model="form.address" filterable :placeholder="t('alertEn.destination')">
                <ElOption
                  v-for="item in addressArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('router.distributionMarket')">
              <ElSelect
                v-model="form.distributionMarket"
                :placeholder="t('alertEn.PleaseSelectThedistributionMarket')"
                filterable
              >
                <ElOption
                  v-for="item in distributionMarketArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrder.transitPriod')">
              <ElInput v-model="form.transport_expires" disabled />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrder.salespersonName')">
              <ElInput v-model="form.salespersonName" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.businessFloorPrice')">
              <ElInput v-model="form.businessFloorPrice" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrder.businessFloorreight')">
              <ElInput v-model="form.businessFloorreight" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <el-divider content-position="center">货值</el-divider>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoiceAddwrite.rmbValue')">
              <ElInput v-model="form.RMBPrice">
                <template #append>￥</template>
              </ElInput>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.usDollarCreditValue')">
              <ElInput v-model="form.dollarPrice" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('formZD.exchangeRate')">
              <ElInput v-model="form.exchangeRate" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <el-divider content-position="center">保险</el-divider>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="保率方式">
              <ElSelect v-model="form.bvjs" filterable placeholder="请选择保率计算方式">
                <ElOption
                  v-for="item in bfjs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.guaranteeRate')">
              <ElInput v-model="form.guaranteeRate" :disabled="form.bvjs != '手动'">
                <template #append>%</template>
              </ElInput>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="每公斤货值">
              <ElInput v-model="form.valuePreservationPerKilogram" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.insurancePremiumsReceivabl')">
              <ElInput v-model="form.businessFloorPrice" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <el-divider content-position="center">包装费用</el-divider>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoiceAddwrite.packagingCalculation')">
              <ElSelect
                v-model="form.packagingCalculation"
                :placeholder="t('alertEn.PleaseSelectThepackagingCalculation')"
                filterable
              >
                <ElOption
                  v-for="item in packagingCalculationArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.packingCharges')">
              <ElInput v-model="form.totalNumberOfpices" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoiceAddwrite.packingCharge')">
              <ElInput v-model="form.packingCharge" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <el-divider content-position="center">运费</el-divider>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoiceAddwrite.freightCalculationMethod')">
              <ElSelect
                v-model="form.freightCalculationMethod"
                filterable
                :placeholder="t('alertEn.PleaseSelectThefreightCalculationMethod')"
                @change="yunfeiChange"
              >
                <ElOption
                  v-for="item in freightCalculationMethodArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.fieghtPrice')">
              <ElInput v-model="form.fieghtPrice" @blur="fieghtPriceChange" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoiceAddwrite.freight')">
              <ElInput v-model="form.freight" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <el-divider content-position="center">短途费</el-divider>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.shortdistancefee')">
              <ElInput v-model="form.shortdistancefee">
                <template #append>￥</template>
              </ElInput>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoiceAddwrite.shortEistanceFeeInUSD')">
              <ElInput v-model="form.shortdistancefeeUSD" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <el-divider content-position="center">其他费用</el-divider>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.invoicing')">
              <ElInput v-model="form.invoicing" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.otherReceivables')">
              <ElInput v-model="form.otherReceivables" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoiceAddwrite.surcharge')">
              <ElInput v-model="form.surcharge" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.foreignExpenses')">
              <ElInput v-model="form.foreignExpenses" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="应收货款">
              <ElInput v-model="form.mustPrice">
                <template #append>￥</template>
              </ElInput>
            </ElFormItem>
          </ElCol>
        </ElRow>
        <el-divider content-position="center">其他设置</el-divider>
        <ElRow>
          <ElCol :span="24">
            <ElFormItem label-width="100px" :label="t('invoice.illustrate')">
              <ElInput v-model="form.illustrate" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElCol :span="8">
          <ElFormItem label-width="100px" :label="t('formZD.notes')">
            <ElInput v-model="form.notes" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="8">
          <ElFormItem label-width="100px" :label="t('invoice.whetherToImitateTheBrand')">
            <ElSelect
              v-model="form.whetherToImitateTheBrand"
              :placeholder="t('alertEn.PleaseSelectThewhetherToImitateTheBrand')"
              filterable
            >
              <ElOption
                v-for="item in whetherToImitateTheBrandArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <el-divider content-position="left">总计</el-divider>
        <ElRow>
          <ElCol :span="16">
            <ElFormItem label-width="100px" :label="t('invoice.paymentMethod')">
              <ElSelect
                v-model="form.paymentMethod"
                :placeholder="t('alertEn.PleaseSelectThepaymentMethod')"
                filterable
              >
                <ElOption
                  v-for="item in paymentMethodArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('invoice.totalReceivableExpenses')">
              <ElInput class="red_input" v-model="form.totalReceivableExpenses" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElTabPane>
      <ElTabPane label="货物设置" name="2">
        <ElForm class="btn">
          <ElButton type="primary" @click="getRepertorIndex">拉取库存</ElButton>
          <ElButton type="primary">重置库存信息</ElButton>
        </ElForm>
        <ElTransfer
          v-model="selShopList"
          :data="shopList"
          :titles="['仓存货物', '出库货物']"
          @change="shopChange"
          :props="{
            key: 'id',
            label: 'gname'
          }"
        />
        <ElTable :data="tableData" stripe style="width: 100%">
          <ElTableColumn prop="gname" label="货号" width="180" />
          <ElTableColumn prop="room" label="房间号" />
          <ElTableColumn prop="piece" label="件数">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.piece"
                :min="1"
                :max="scope.row.js"
                :precision="0"
              />
            </template>
          </ElTableColumn>
          <ElTableColumn prop="quantity" label="数量" />
          <ElTableColumn prop="colour" label="颜色" />
          <ElTableColumn prop="length" label="尺码" />
          <ElTableColumn prop="weight" label="重量" />
          <ElTableColumn prop="remark" label="备注" />
        </ElTable>
      </ElTabPane>
      <ElTabPane label="清关单据" name="3">
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="批次号">
              <ElInput v-model="form.qg_number" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="清关公司名称">
              <ElInput v-model="form.number" disabled />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="转出重量">
              <ElInput v-model="form.consignee" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="转出体积">
              <ElInput v-model="form.totalVolume" @blur="midu">
                <template #append>m³</template>
              </ElInput>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="转出密度">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="转出货值">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="转出保率">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="转出保险">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="转出其它费">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="清关价格">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="清关金额">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="转出运输方式">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="毛利润">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="国内费用">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="押金">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="商标备注">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="出库状态">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="国外费用">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="后程不可回收">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElTabPane>
      <ElTabPane label="其他信息" name="4">
        <ElRow>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="单据状态">
              <ElSelect v-model="form.state" placeholder="请选择" filterable>
                <ElOption
                  v-for="item in danjuArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="审核人">
              <ElInput v-model="form.audit" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="制单人">
              <ElInput v-model="form.enact" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="制单时间">
              <ElInput v-model="form.enacttime" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="返佣姓名">
              <ElInput v-model="form.brokerage_name" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="返佣比例">
              <ElInput v-model="form.brokerage_rate" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="返佣金额">
              <ElInput v-model="form.brokerage_money" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="返佣状态">
              <ElSelect v-model="form.brokerage_status" placeholder="请选择" filterable>
                <ElOption
                  v-for="item in fanyongArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" label="返佣备注">
              <ElInput v-model="form.brokerage_remark" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElTabPane>
    </ElTabs>
  </ElForm>
</template>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.btn {
  margin: 0px 0 10px 0;
}
:deep(.red_input .el-input__wrapper) {
  box-shadow: 0 0 0 1px red inset;
}
</style>
